<template>
    <VHeader v-if="$route.meta.navBar.state" :header-data="HeaderData"/>
    <div class="content">
        <!-- keep-alive 切换过程中将状态保留在内存中，防止重复渲染DOM，减少加载时间及性能消耗，提高用户体验性 -->
        <router-view v-slot="{ Component }" >
            <keep-alive v-if="$route.meta.keepAlive">
                <component :is="Component" :key="$route.path"/>
            </keep-alive>
            <component v-else :is="Component" :key="$route.path"/>
        </router-view>
    </div>
    <VTabbar v-if="$route.meta.tabBar"/>
</template>

<script setup>
    import VHeader from '../../components/home/header.vue'
    import VTabbar from '../../components/home/tabBar.vue'
    import { useRouter } from "vue-router";
    import {reactive, ref, watch,inject} from 'vue'
    import { isMobile } from '../../utils/mobile.js'
	  import { ElMessage, ElMessageBox } from 'element-plus'

    
    const router = useRouter();
    const HeaderData = reactive({
        info:{},
        setting:{}
    })
    

    
    watch(() => 
        [router.currentRoute.value.path],
        (toPath) => {
            if(!isMobile()){
                ElMessageBox.alert('请使用移动设备浏览该网页！', '温馨提示！', {
                    confirmButtonText: 'OK'
                })
            }
        },{immediate: true,deep: true})
</script>

<style lang="scss">
.content{width: 100%;margin: 3rem 0;min-height: 89vh; height: 100%;overflow: hidden;overflow-y: scroll;}
</style>
